<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名称" prop="User_Name">
        <el-input v-model="ruleForm.User_Name" />
      </el-form-item>

      <el-form-item label="用户密码" prop="User_Pwd">
        <el-input type="password" v-model="ruleForm.User_Pwd" />
      </el-form-item>

      <el-form-item label="真实姓名" prop="User_TrueName">
        <el-input v-model="ruleForm.User_TrueName" />
      </el-form-item>

      <el-form-item label="性别" prop="User_Sex">
        <el-radio-group v-model="ruleForm.User_Sex">
          <el-radio :value="false">男</el-radio>
          <el-radio :value="true">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="出生日期" required>
        <el-col :span="11">
          <el-form-item prop="User_Birthday">
            <el-date-picker v-model="ruleForm.User_Birthday" type="date" aria-label="Pick a date" placeholder="Pick a date" style="width: 100%"/>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="状态" prop="User_State">
        <el-radio-group v-model="ruleForm.User_State">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">冻结</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="角色" prop="Role_Id">
        <el-checkbox-group v-model="ruleForm.Role_Id">
          <el-checkbox v-for="item in RoleInfo" :value="item.Role_Id" name="type">
            {{ item.Role_Name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          Create
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import axios from 'axios'

  //创建响应式数据用于完成角色信息展示
  const RoleInfo=ref([{
    Role_Id:0,
    Role_Name:""
  }]);
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    User_Name: '',
    User_Pwd: '',
    User_TrueName: '',
    User_Sex: false,
    User_Birthday: '',
    User_State: 0,
    Role_Id:[]
  })
  
  //表单规则验证
  const rules = reactive<FormRules>({
    User_Name: [
      { required: true, message: '用户名称不能为空', trigger: 'blur' },
      { min: 3, max: 10, message: '用户名称长度在 3 到 10 个字符', trigger: 'blur' },
    ],
    User_Pwd: [
      {
        required: true,
        message: '用户密码不能为空',
        trigger: 'change',
      },
    ],
    User_TrueName: [
      {
        required: true,
        message: '真实姓名不能为空',
        trigger: 'change',
      },
    ],
    User_Birthday: [
      {
        type: 'date',
        required: true,
        message: '出生日期不能为空',
        trigger: 'change',
      },
    ],
    date2: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    location: [
      {
        required: true,
        message: 'Please select a location',
        trigger: 'change',
      },
    ],
    Role_Id: [
      {
        type: 'array',
        required: true,
        message: '请至少选中一个角色',
        trigger: 'change',
      },
    ]
  })
  
  //提交
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  //重置
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  //声明周期函数钩(加载钩子)
  onMounted(()=>{
    LoadRole();
  })

  //获取所有角色信息
  const LoadRole=()=>{
      axios.get("https://localhost:44376/api/Users/ShowRoleList")
      .then(res=>{
        RoleInfo.value=res.data.Data;
      })
  }

  </script>
  